<template>
  <div id="container">
    <h4
      style="font-family:'Helvetica Neue';text-align: left;color: #f22d00;font-weight: bolder"
    >
      <em class="el-icon-star-off"></em>~~~{{ this.name }}
    </h4>
    <h1>商品列表</h1>
    <br />

    <el-row>
      <el-col
        :xs="6"
        :sm="6"
        :md="6"
        :lg="6"
        :xl="6"
        style="padding:10px"
        v-for="fit in fits"
      >
        <el-card :body-style="{ padding: '0px' }">
          <img
            :src="get_image(fit.商品封面)"
            width="100%"
            class="image"
            v-on:click="go_commodity_info(fit)"
          />
          <div style="padding: 14px;" v-on:click="go_commodity_info(fit)">
            <span>{{ fit.商品名称 }}</span>
            <div class="bottom clearfix">
              <br />
              <h3 type="text" style="color: #f22d00;font-weight: bolder">
                ￥{{ fit.商品价格 }}
              </h3>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import qs from "qs";
import axios from "axios";

const BASE_URL = "http://127.0.0.1:8886";

export default {
  created() {},
  data() {
    return {
      fits: [],
      sort_id: "",
      url: "",
      name: ""
    };
  },
  mounted() {
    this.getdata();
  },

  watch: {
    $route: "flush"
  },
  methods: {
    flush() {
      this.getdata();
    },
    getdata() {
      this.fits = [];
      this.name = this.getpar("name"); //读取home 传来的参数 name  id
      console.log("fff" + this.getpar("name"));
      axios
        .post(
          BASE_URL + "/commodity/get_commodity_list_for_sort",
          qs.stringify({ sort_id: this.getpar("id"), start: 0, coum: 50 }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          console.log(re.data.备注);
          if (re.data.状态码 === 200) {
            // this.userInfo.id=true;
            this.fits = re.data.列表;

            console.log(this.fits);
            console.log(re.data.备注);
          } else {
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    go_commodity_info(item) {
      console.log("fff" + item.商品id);
      this.$router.push("/commodity_info?id=" + item.商品id);
    },
    getpar(par) {
      //获取当前URL
      let local_url = document.location.href;
      //获取要取得的get参数位置
      let get = local_url.indexOf(par + "=");
      if (get == -1) {
        return "";
      }
      //截取字符串
      let get_par = local_url.slice(par.length + get + 1);
      //判断截取后的字符串是否还有其他get参数
      let nextPar = get_par.indexOf("&");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      nextPar = get_par.indexOf("?");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      nextPar = get_par.indexOf("#");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      return decodeURI(get_par);
    },
    get_image(id) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    }
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  min-height: 100vh;
  background-color: #f3f3f3;
}
h1 {
  font-family: "微软雅黑";
  color: #000000;
  width: auto;
  height: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.grid-content {
  margin-left: 10px;
  margin-right: 10px;
  /*background-coclor: rgb(44, 143, 121);*/
  /*background-image: url("./img/pro16.jpg");*/
  border-radius: 4px;
  min-height: 400px;
  min-width: 50px;
}
.image {
  height: 300px;
  cursor: pointer;
}
</style>

